<script setup lang="ts">
import type { ContentCategoryTreeResult } from '#/api/cms';

import { defineProps } from 'vue';

interface MenuProps {
  menuData: ContentCategoryTreeResult[];
}

withDefaults(defineProps<MenuProps>(), {
  menuData: () => [],
});

// 计算属性用于简化子元素检查
const hasChildren = (item: ContentCategoryTreeResult) =>
  Array.isArray(item.children) && item.children.length > 0;
</script>

<template>
  <div class="flex justify-around">
    <div v-for="item in menuData" :key="item.categoryId">
      <a v-if="!hasChildren(item)" @click.prevent>
        {{ item.categoryName }}
      </a>
      <div v-else class="dropdown">
        <button class="dropbtn" @click.prevent>
          {{ item.categoryName }}
        </button>
        <div v-if="hasChildren(item)" class="dropdown-content">
          <a
            v-for="grandson in item.children"
            :key="grandson.categoryId"
            href="#"
            @click.prevent
          >
            {{ grandson.categoryName }}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.dropdown {
  position: relative;
  display: flex;
  align-items: center;

  .dropbtn {
    padding: 14px 16px;
    margin: 0;
    font-family: inherit;
    font-size: 20px;
    color: white;
    background-color: inherit;
    border: none;
    outline: none;
  }

  &:hover .dropbtn {
    border-bottom: 4px solid #752424;
  }

  &:hover .dropdown-content {
    display: block;
  }

  .dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    display: none;
    min-width: 160px;
    background: linear-gradient(
      to bottom,
      rgb(200 196 231),
      rgb(104 128 225 / 50%)
    );

    a {
      display: block;
      padding: 12px 16px;
      color: white;
      text-align: left;
      text-decoration: none;

      &:hover {
        background-color: #cc2727;
      }
    }
  }
}
</style>
